import React from "react";
import { Button, Divider, Space, Typography  } from "antd";
import {
  SearchOutlined,
  HeartOutlined,
  LoadingOutlined,
} from "@ant-design/icons"; //
import { useState } from "react";

const { Text } = Typography;
const { Paragraph } = Typography;

export default function Basic() {
  //声明 loading 的状态
  let [loading, setLoading] = useState(false);
  //声明状态
  let [msg, setMsg] = useState('自责要短暂，不过要长久铭记');

  return (
    <div>
      <h2>按钮</h2>
      <Space size={'middle'}>
        <Button>我是 Antd 哦</Button>
        <Button type="primary" shape="circle" icon={<SearchOutlined />} />

        <Button
          type="primary"
          loading={loading}
          onClick={() => {
            setLoading(true);
            setTimeout(() => {
              setLoading(false);
            }, 2000);
          }}
        >
          Loading
        </Button>
        <Button danger type="primary">
          我是 Antd 哦
        </Button>
      </Space>
      <div className="h-20"></div>
      <h2>字体图标</h2>
      <Space>
        <HeartOutlined style={{ fontSize: "20px", color: "#f25" }} />
        <LoadingOutlined style={{ fontSize: "20px", color: "#f25" }} />
      </Space>
      <div className="h-20"></div>

      <h2>排版</h2>
      <Text mark>高亮文本</Text>
      <Text delete>998</Text>

      <Paragraph copyable>点击我可以复制哦~~~</Paragraph>
      <Paragraph editable={{onChange: (v) => {
        setMsg(v);
      }}}>{msg}</Paragraph>


      <Divider>我是有底线的哦</Divider>
    </div>
  );
}
